<template>
  <div class="data-overview">
    <div class="header-filter">
      <div class="project-filter">
        <div class="left-text">搜索页面范围</div>
        <div class="vertical-line"></div>
        <el-cascader
          v-model="projectName"
          :props="props"
          :options="projectOptions"
          @change="projectHandleChange"
        ></el-cascader>
      </div>
      <div class="time-filter">
        <div class="left-text">统计时间</div>
        <div class="vertical-line"></div>
        <el-date-picker
          v-model="selectDate"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <div class="clock"></div>
      </div>
    </div>
    <el-tabs v-model="activeTab" @tab-click="changeTab">
      <el-tab-pane label="访问分析" name="accessAnalysis">
        <div class="second-tab">
          <div
            v-for="(item, index) in secondTabList"
            :key="index"
            :class="
              secondActiveIndex == index + 1
                ? 'second-tab-item-active'
                : 'second-tab-item'
            "
            @click="changeSecondTab(index + 1, item.name)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="页面分析" name="pagesAnalysis">
        <div class="second-tab">
          暂无数据
        </div>
      </el-tab-pane> -->
    </el-tabs>
    <div class="content">
      <OverallOverview
        v-if="secondTabName == '整体情况'"
        :selectDate="selectDate"
        :compareDateParent="compareDate"
        :projectName="projectName"
      />
      <LinkChannel
        v-if="secondTabName == '链接渠道'"
        :selectDate="selectDate"
        :compareDateParent="compareDate"
        :projectName="projectName"
      />
      <ScanChannel
        v-if="secondTabName == '扫码渠道'"
        :selectDate="selectDate"
        :compareDateParent="compareDate"
        :projectName="projectName"
      />
    </div>
  </div>
</template>

<script>
import { getEventPageTree } from "@/api/index";
export default {
  components: {
    OverallOverview: () => import("./components/overallOverview.vue"),
    LinkChannel: () => import("./components/linkChannel.vue"),
    ScanChannel: () => import("./components/scanChannel.vue"),
  },
  data() {
    return {
      projectName: [],
      projectOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      secondTabList: [
        {
          name: "整体情况",
        },
        {
          name: "链接渠道",
        },
        {
          name: "扫码渠道",
        },
      ],
      selectDate: "",
      compareDate: "",
      activeTab: "accessAnalysis",
      secondActiveIndex: 1,
      secondTabName: "整体情况",
      today: "",
      props: {
        label: "currentName",
        value: "currentId",
      },
    };
  },
  watch: {
    selectDate(val) {
      if (val) {
        console.log("时间发生了变化", val);
      }
    },
  },
  created() {
    const today = new Date();
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2, "0");
    const day = today
      .getDate()
      .toString()
      .padStart(2, "0");
    this.today = `${year}-${month}-${day}`;
    const dateStart = new Date(today);
    dateStart.setDate(today.getDate() - 29);
    this.startDate =
      dateStart.getFullYear() +
      "-" +
      (dateStart.getMonth() + 1) +
      "-" +
      dateStart.getDate();
    this.selectDate = [this.startDate, this.today];

    let compareDateStart = new Date(today);
    let compareDateEnd = new Date(today);
    compareDateStart.setDate(today.getDate() - 59);
    compareDateEnd.setDate(today.getDate() - 30);
    compareDateStart =
      compareDateStart.getFullYear() +
      "-" +
      (compareDateStart.getMonth() + 1) +
      "-" +
      compareDateStart.getDate();
    compareDateEnd =
      compareDateEnd.getFullYear() +
      "-" +
      (compareDateEnd.getMonth() + 1) +
      "-" +
      compareDateEnd.getDate();
    this.compareDate = [compareDateStart, compareDateEnd];

    this.getEventPageTreeFn();
  },
  methods: {
    projectHandleChange(value) {
      console.log("这里项目名称发生了改变", value, this.projectName);
    },
    changeTab(tab, event) {
      console.log(tab, event);
    },
    changeSecondTab(index, name) {
      this.secondActiveIndex = index;
      this.secondTabName = name;
    },
    async getEventPageTreeFn() {
      const params = {};
      const res = await getEventPageTree(params);
      if (res.code == 200) {
        console.log("res", res);
        res.data.forEach((item) => {
          if (item.children) {
            item.children.forEach((_item) => {
              if (_item.children) {
                delete _item.children;
              }
            });
          }
        });
        res.data = res.data.filter((item) => item.isShow == 1);
        this.projectOptions = res.data;
        this.projectName = [
          res.data[0].currentId,
          res.data[0].children[0].currentId,
        ] || [res.data[0].currentId, res.data[0].children[0].currentId];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.data-overview {
  background: url("../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 13px;
  .header-filter {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 36px;
    .project-filter,
    .time-filter {
      height: 100%;
      background-color: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(141, 155, 185, 0.3);
      border-radius: 6px;
      padding: 7px 10px;
      box-sizing: border-box;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      line-height: 22px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .vertical-line {
        width: 1px;
        height: 11px;
        border: 1px solid #cacaca;
        margin-left: 12px;
      }
    }
    .project-filter {
      width: 355px;
      /deep/ .el-cascader .el-input .el-input__inner {
        border: none;
        height: 36px;
      }
    }
    .time-filter {
      width: 350px;
      margin-left: 22px;
      position: relative;
      .date-icon {
        position: absolute;
        right: 8px;
        top: 8px;
      }
      .clock {
        width: 17px;
        height: 16px;
        background: url("../../../assets/images/clock@2x.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 15px;
      }
      /deep/ .el-range-editor.el-input__inner {
        border: none;
        height: 36px;
      }
      /deep/ .el-date-editor .el-range-separator {
        width: 10%;
      }
      /deep/ .el-date-editor .el-range__icon {
        display: none;
      }
      /deep/ .el-date-editor--daterange.el-input__inner {
        width: 250px;
      }
    }
  }
  .content {
    margin-top: 30px;
  }
  .second-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 18px;
    .second-tab-item {
      cursor: pointer;
      margin-right: 30px;
    }
    .second-tab-item-active {
      margin-right: 30px;
      color: #7052ff;
      cursor: pointer;
    }
  }
  /deep/ .el-tabs__header {
    margin: 14px 0 0 0;
  }
  /deep/ .el-tabs__header .el-tabs__nav-wrap {
    background-color: #ffffff;
    border-radius: 8px 8px 0px 0px;
  }
  /deep/ .el-tabs__content {
    background: #f9f9f9;
    border-radius: 0px 0px 8px 8px;
    border: 1px solid #fafafa;
    height: 40px;
    line-height: 40px;
  }
}
</style>
